<template>
    <div class="app-container">
        <el-row style="margin-bottom:20px;">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams"  ref="queryForm" :inline="true"  label-width="90px">
                    <el-form-item label="用户ID">
                        <el-input v-model="queryParams.userId" placeholder="请输入用户ID"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" >
                        <el-autocomplete v-model="queryParams.cellphone" placeholder="请输入手机号"
                        :fetch-suggestions="querySearchAsync"
                         @select="handleSelect"></el-autocomplete>
                    </el-form-item>
                    <el-form-item label="类目" >
                        <el-select v-model="queryParams.acctc">
                            <el-option label="零钱" value="pinmoney"></el-option>
                            <el-option label="推荐收益" value="referralProfit"></el-option>
                            <el-option label="团队收益" value="teamProfit"></el-option>
                            <el-option label="网体收益" value="fttProfit"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item> 
                        <el-button type="primary" icon="el-icon-search" @click='handleQuery(queryParams)' size="mini" >搜索</el-button>
                        <el-button icon="el-icon-refresh" @click='resetQuery()' size="mini">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport">导出</el-button>
            </el-col>
        </el-row>
        <Table :list='list' :loading='loading' :tableColumns='tableColumns' ></Table>

        <pagination  v-show="total>0"  :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getAccountsHander"  />
        
    </div>
</template>
<script>
import myForm from '@/views/components/myForm'
import Table from '@/views/components/myTable'
import { getAccounts, userListAPI,accountsExport} from '@/api/ka/ka'
export default {
    components:{
        myForm,
        Table
    },
    data() {
        return{
            loading:false,
            exportLoading:false,

            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            tableColumns:[
                {label:'ID',param:'id'},
                {label:'用户ID',param:'userId'},
                {label:'手机号',param:'cellphone'},
                {label:'角色',param:'roleLevel',
                    render:row=>{
                        if(row.roleLevel == '2-1742'){
                            return '经销商'
                        }else if(row.roleLevel == '2-1741'){
                            return '经理'
                        }else if(row.roleLevel == '2-0'){
                            return '会员'
                        }else {
                            return row.roleLevel
                        }
                    }
                },
                {label:'网体',param:'fttLevel'},
                {label:'姓名',param:'idname'},
                {label:'类目',param:'acctc',
                    render:row=>{
                        if(row.acctc == 'pinmoney'){
                            return '零钱'
                        }else if(row.acctc == 'referralProfit'){
                            return '推荐收益'
                        }else if(row.acctc == 'teamProfit'){
                            return '团队收益'
                        }else if(row.acctc == 'fttProfit'){
                            return '网体收益'
                        }else {
                            return row.acctc
                        }
                    }
                },
                
                {label:'总额',param:'total',
                    render:row=>{
                        if(row.drcr == 'incr'){
                            return '+'+row.total
                        }else if(row.drcr == 'decr'){
                            return '-'+row.total
                        }else{
                            return row.total
                        }
                    }
                },
                {label:'创建时间',param:'createdAt',
                    render: row => {
                        if(!row.createdAt){
                            return '-'
                        }
                        return row.createdAt.replace('T',' ').substring(0,16)
                    }
                },
                
            ],
            list:[],
            total:0,
            restaurants:[],
            timeout:null
        }
    },
    created(){
        
        this.getAccountsHander()
    },
    methods:{
        
        //获取数据
        getAccountsHander(data){
            data = this.addDateRange(this.queryParams)
            getAccounts(data).then(res=>{
                if(res.data.code == 200){
                    this.list = res.data.rows
                    this.total = res.data.total
                }
            })
        },
        //远程搜索
        handleSelect(val){
            this.queryParams.userId = val.userId
        },
        querySearchAsync(queryString,cb){
            clearTimeout(this.timeout)
            var restaurants = []
            this.timeout = setTimeout(()=>{
                let data = {
                    cellphone:queryString
                }
                userListAPI(data).then(res=>{
                    if(res.data.code == 200){
                        let results = res.data.rows
                        results.forEach(item=>{
                            restaurants.push({value:item.cellphone,userId:item.id})
                            cb(restaurants)
                        })
                    }
                })
            },1000*Math.random())
        },
        //搜索
        handleQuery(obj){
            this.searchDelVal(obj)
            this.queryParams.pageNo = 1;
            this.getAccountsHander()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.searchReset();
            this.handleQuery();
            
        },
        //清空搜索条件
        searchReset(){
            this.queryParams = {
                pageNo: 1,
                pageSize: 10,
                cellphone:undefined,
                userId:undefined
            }
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm("是否确认导出账户数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.exportLoading = true;
                return accountsExport(queryParams);
            }).then(response => {
                this.download(response.msg);
                this.exportLoading = false;
            }).catch(() => {});
        },
        
    }
}
</script>
<style scoped>
.selectBtn {
    background:#1890ff;
    color:#fff;
}
</style>
